import React from 'react';
import {View, Text, StyleSheet, TextInput} from 'react-native';
import {Card, Button} from 'react-native-elements';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import {getSpec, orderSubmit} from '../../api';
import {connect} from 'react-redux';
import action from '../../store/actions/alarmOverview';
import PublicHead from '../publicComponents/PublicHead';
import RNPickerSelect from 'react-native-picker-select';

/**
 * 订单
 */
class Order extends React.Component {
  state = {
    specData: [],
    spec_code: '',
    level: '',
    num: 0,
    loading: false,
  };

  componentDidMount(): void {
    getSpec()
      .then(res => {
        let specData = res.data.map(item => {
          let [label, value] = [item.name, Number(item.code)];
          return {
            label,
            value,
          };
        });
        this.setState({
          specData,
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  /**
   * 改变型号编码
   * @param value
   */
  specSelect = spec_code => {
    console.log(spec_code);
    this.setState({spec_code});
  };
  /**
   * 改变优先级
   * @param value
   */
  priority = level => {
    level = Number(level);
    this.setState({level});
  };

  /**
   * 数量
   * @param value
   */
  onChangeText = num => {
    num = Number(num);
    this.setState({
      num,
    });
  };
  /**
   * 提交表单
   */
  submit = () => {
    const {spec_code, level, num, loading} = this.state;
    this.setState({
      loading: true,
    });
    orderSubmit(spec_code, level, num)
      .then(res => {
        this.setState({
          loading: false,
        });
      })
      .catch(err => {
        this.setState({
          loading: false,
        });
      });
  };

  render() {
    const placeholderSpec = {
      label: '请选择型号编码',
      value: null,
      color: '#9EA0A4',
    };
    const placeholderPriority = {
      label: '请选择优先级',
      value: null,
      color: '#9EA0A4',
    };
    return (
      <View>
        <PublicHead headerText={'订单'}/>
        <Card
          containerStyle={{
            borderColor: 'transparent',
            shadowOffset: {width: 5, height: 8},
            shadowOpacity: 0.5,
            shadowRadius: 20,
          }}>
          <View style={{marginTop: 20}}>
            <Text style={styles.tip}>请选择型号编码：</Text>
            <RNPickerSelect
              style={pickerSelectStyles}
              placeholder={placeholderSpec}
              onValueChange={value => this.specSelect(value)}
              items={this.state.specData}
            />
          </View>
          <View style={{marginTop: 20}}>
            <Text style={styles.tip}>请选择优先级：</Text>
            <RNPickerSelect
              style={pickerSelectStyles}
              placeholder={placeholderPriority}
              onValueChange={value => this.priority(value)}
              items={[
                {label: '高', value: '3'},
                {label: '中', value: '2'},
                {label: '低', value: '1'},
              ]}
            />
          </View>
          <View style={{marginTop: 20}}>
            <Text style={styles.tip}>请输入数量：</Text>
            <TextInput
              keyboardType='numeric'
              style={{height: 40, borderColor: 'gray', borderWidth: 1}}
              onChangeText={text => this.onChangeText(text)}
              value={this.state.num}
            />
          </View>
          <View style={{marginTop: 40}}>
            <Button
              loading={this.state.loading}
              icon={
                <FontAwesome
                  name="reorder"
                  size={15}
                  color="white"
                />
              }
              title=" 提交"
              onPress={this.submit}
              buttonStyle={{backgroundColor: '#53CAC4'}}
            />
          </View>
        </Card>
      </View>
    );
  }
}

const mapStateToProps = state => state.alarmOverview;
export default connect(mapStateToProps, action)(Order);
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContainer: {
    flex: 1,
    paddingHorizontal: 15,
  },
  scrollContentContainer: {
    paddingTop: 40,
    paddingBottom: 10,
  },
  tip: {
    color: '#666',
    fontSize: 16,
    fontWeight: 'bold',
  },
});
const pickerSelectStyles = StyleSheet.create({
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'purple',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30,
  },
});
